<template>
  <form class="mui-input-group">
    <div class="mui-input-row">
      <label class="tit">收件人</label>
      <input v-model="form.name" type="text" class="mui-input-clear" placeholder="请输入收件人姓名">
    </div>
    <div class="mui-input-row">
      <label class="tit">联系方式</label>
      <input v-model="form.tel" type="text" class="mui-input-clear" placeholder="请输入手机号">
    </div>
    <div class="mui-input-row">
      <label class="tit">所在地区</label>
      <input v-model="form.area" type="text" class="mui-input-clear" placeholder="所在地区" @click="choose">
      <div class="divwrap">
        <div class="mask" @click="choose" v-show="show"></div>
        <v-distpicker v-show="show" type="mobile" @province="onChangeProvince" @city="onChangeCity"
          @area="onChangeArea" :province="newInfo.province" :city="newInfo.city" :area="newInfo.area">
        </v-distpicker>
      </div>
    </div>
    <div class="mui-input-row">
      <label class="tit">详细地址</label>
      <input v-model="form.detail" type="text" class="mui-input-clear" placeholder="请输入详细地址">
    </div>
    <div class="mui-button-row">
      <button v-show="id" @click="del" type="button" class="mui-btn mui-btn-danger mui-btn-block">删除</button>
      <button @click="save" type="button" class="mui-btn mui-btn-primary mui-btn-block">确认</button>
    </div>
  </form>
</template>

<script>
import VDistpicker from 'v-distpicker';
export default {
  components: {
    VDistpicker
  },
  data() {
    return {
      form: {
        name: '',
        tel: '',
        area: '',
        detail: ''
      },
      show: false,
      newInfo: {
        province: '',
        city: '',
        area: ''
      }
    }
  },
  methods: {
    choose() {
      this.show =!this.show;
    },
    save() {
      // 保存逻辑
    },
    del() {
      // 删除逻辑
    },
    onChangeProvince(province) {
      this.newInfo.province = province;
    },
    onChangeCity(city) {
      this.newInfo.city = city;
    },
    onChangeArea(area) {
      this.newInfo.area = area;
    }
  }
};
</script>

<style lang="scss" scoped>
.mui-input-group.mui-button-row {
  height: auto;
}

.mui-input-clear {
  font-size: 14px;
}

.mui-input-group:before {
  list-style: none;
}

.mui-button-row {
  margin-top: 20px;

  button {
    margin: 20px 0;
    padding: 10px 0;
  }
}

.tit {
  color: #999;
}

input::-webkit-input-placeholder {
  color: #999;
}

input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #999;
}

input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #999;
}

input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #999;
}

.divwrap>.mask {
  background: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.divwrap>.distpicker-address-wrapper {
  color: #999;
  background: #fff;
  border-top: 1px solid #ccc;
  z-index: 1;
  height: 300px;
  overflow-y: auto;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
</style>